<template>
  <div class="finereport-container">
    <!-- 帆软报表iframe容器 -->
    <iframe
      ref="fineReportIframe"
      :src="reportUrl"
      frameborder="0"
      width="100%"
      height="100%"
      @load="onReportLoad"
    ></iframe>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const fineReportIframe = ref(null)

// 帆软服务器地址配置（请根据实际情况修改）
const fineReportServer = ref('http://10.223.9.4:37799/webroot/decision')

// 根据路由参数动态生成报表URL
const reportUrl = computed(() => {
  // 从路由参数获取报表名称
  const reportName = route.query.reportName || ''
  const reportId = route.query.reportId || ''
  
  // 构建完整的报表URL
  let url = fineReportServer.value
  
  if (reportName) {
    // 方式1：通过报表名称访问
    url += `/reportlet?reportlet=${reportName}`
  } else if (reportId) {
    // 方式2：通过报表ID访问
    url += `/view/report?viewlet=${reportId}`
  }
  
  // 添加其他参数
  const params = { ...route.query }
  delete params.reportName
  delete params.reportId
  
  // 将其他参数追加到URL
  Object.keys(params).forEach((key, index) => {
    const separator = url.includes('?') ? '&' : '?'
    url += `${separator}${key}=${params[key]}`
  })
  
  return url
})

// 报表加载完成事件
const onReportLoad = () => {
  console.log('帆软报表加载完成')
}

onMounted(() => {
  console.log('帆软报表组件已挂载')
  console.log('报表URL:', reportUrl.value)
})
</script>

<style lang="less" scoped>
.finereport-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
  
  iframe {
    display: block;
    border: none;
  }
}
</style>



